page-form-demo {

  .ngForm {
    $label-width: 62px;
    $danger-color: #f53d3d;
    ion-item {
      font-size: 1.5rem;
    }
    ion-label {
      min-width: $label-width;
      &[required]:after, &.required:after {
        position: absolute; /* 使用绝对定位让*不占用位置 */
        color: $danger-color;
        content: '*';
        padding: 0 2px;
      }
      &.too-long { /* label内容超过$label-width自动换行 */
        text-overflow: inherit;
        white-space: normal;
        margin: 1px 8px 1px 0;
        width: $label-width;
      }
    }
    ion-datetime, ion-select {
      width: 100%;
      max-width: 100%;
    }

    .form-invalid-tip {
      padding: 1px 16px;
      color: $danger-color;
      line-height: 18px;
      > div:before {
        content: '!';
        display: inline-block;
        text-align: center;
        font-size: 14px;
        color: #fff;
        width: 17px;
        height: 16px;
        background: $danger-color;
        border-radius: 50%;
        margin-right: 2px;
      }
    }

    // 这块样式表单不需要就删了
    .form-item-content {
      width: 100%;
      margin: 11px 0 11px 16px;
      .form-radio, .form-checkbox {
        margin-right: 8px;
        display: inline-block;
      }
      .form-textarea {
        min-height: 18px;
        max-height: 100px; /* 自定义最大高度，超出会显示滚动条 */
        overflow: auto;
        outline: none;
        -webkit-user-select: text;
      }
      .form-textarea-placeholder:before {
        content: '说你想说的...';
        position: absolute;
        color: #999;
        text-overflow: clip;
        z-index: -1;
      }
      .form-number-step {
        input {
          width: 30px;
          border: none;
          text-align: center;
          vertical-align: bottom;
          line-height: 22px;
        }
        ion-icon {
          font-size: 22px;
          font-weight: bold;
          color: #999;
          background: #eee;
          border-radius: 50%;
          width: 22px;
          height: 22px;
          text-align: center;
          position: relative;
          &:after { /* 扩大可点击范围 */
            content: '';
            position: absolute;
            top: -5px;
            bottom: -5px;
            right: -5px;
            left: -5px;
          }
        }
      }
    }

    // 这块样式表单不需要就删了
    .contacts {
      ion-row {
        color: #333;
        ion-icon {
          font-size: 22px;
          font-weight: bold;
        }
        ion-col {
          padding: 2px 4px;
        }
        .contacts-input {
          width: 100%;
          height: 28px;
          border: 1px solid #c8c7cc;
        }
      }
    }

  }

}
